<template>
    <div class="tab1">
        <div class="banner">
            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="(item,index) in 5" :key="index">
                    <div class="ban"  :style="{backgroundImage: 'url(' + require(`../assets/img/tab1/banner${item}.png`) + ')' }">
                        <p style="text-align:center" v-if="item===1">读万卷书更要行万里路</p>
                        <p style="text-align:center" v-if="item===2">让教育充满诗意</p>
                        <p style="text-align:center" v-if="item===3">让学习充满乐趣</p>
                        <p style="text-align:center" v-if="item===4">让课堂更加立体</p>
                        <p style="text-align:center" v-if="item===5">众匠研学成长营带着梦想去旅行</p>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="second">
            <p class="title">
                <span>关于</span>
                <span style="color:rgb(74, 179, 68)">研学旅行</span>
            </p>
            <div class="bgIcon">
                <div class="auto"></div>
                <div style="position: absolute;left:100px;top:50px">
                    <img src="@/assets/img/tab1/one.png" alt="">
                </div>
                <div class="dingyi common" >
                    <p>定义</p>
                    <p class="line_ellipsis" title="学生集体参加的有组织、有计划、有目的的校外参观体验实践活动。">学生集体参加的有组织、有计划、有目的的校外参观体验实践活动。</p>
                </div>
                <div style="position: absolute;left: 828px;top: 109px;">
                    <img src="@/assets/img/tab1/two.png" alt="">
                </div>
                <div class="two common" >
                    <p>特点</p>
                    <p class="line_ellipsis" title="有意组织、集体活动、亲身体验">有意组织、集体活动、亲身体验</p>
                </div>
                <div style="position: absolute;left:130px;top:295px">
                    <img src="@/assets/img/tab1/three.png" alt="">
                </div>
                <div class="three common" >
                    <p>意义</p>
                    <p class="line_ellipsis" title="①研学旅行是贯彻《国家中长期教育改革规划和发展纲要》和十八大及十八届四中全会精神的重要举措；②研学旅行是培育和践行社会主义核心价值观的重要载体；③研学旅行是全面推进中小学素质教育的重要途径；④研学旅行是学校教育与校外教育相结合的重要组成部分。">
                        ①研学旅行是贯彻《国家中长期教育改革规划和发展纲要》和十八大及十八届四中全会精神的重要举措；
                        ②研学旅行是培育和践行社会主义核心价值观的重要载体；
                        ③研学旅行是全面推进中小学素质教育的重要途径；
                        ④研学旅行是学校教育与校外教育相结合的重要组成部分。
                    </p>
                </div>
                <div style="position: absolute;left:836px;top:324px">
                    <img src="@/assets/img/tab1/four.png" alt="">
                </div>
                <div class="four common" >
                    <p>主要政策</p>
                    <p class="line_ellipsis" title="2016年《教育部等11部门关于推进中小学生研学旅行的意见》中明确指出“中小学生研学旅行是学校教育和校外教育衔接的创新形式，是教育教学的重要内容，是综合实践育人的有效途径。2017年《教育部关于印发<中小学综合实践活动课程指导纲要>的通知》中提出“综合实践活动是国家义务教育和普通高中课程方案规定的必修课程，与学科课程并列设置，是基础教育课程体系的重要组成部分。">
                        2016年《教育部等11部门关于推进中小学生研学旅行的意见》中明确指出“中小学生研学旅行是学校教育和校外教育衔接的创新形式，是教育教学的重要内容，是综合实践育人的有效途径。2017年《教育部关于印发&lt;中小学综合实践活动课程指导纲要&gt;的通知》中提出“综合实践活动是国家义务教育和普通高中课程方案规定的必修课程，与学科课程并列设置，是基础教育课程体系的重要组成部分。
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import banner1 from '../assets/img/tab1/banner1.png'
export default {
    data(){
        return {
            bannerList:[],
            banner1: banner1,
        }
    }
}
</script>
<style lang="less">
.tab1{
    .el-carousel__container{
        height:400px;
    }
    .second{
        text-align: center;
        .title{
            font-size: 30px;
            font-weight: bold;
            color: #666666;
        }
        .common{
            text-align: left;
            position: absolute;
            width: 228px;
            height: 97px;
            min-height: 40px;
            animation: 0s ease 0s 1 normal none running none;
            p:nth-child(1){
                margin-bottom: 10px;
            }
        }
        .dingyi{
            top: 35px;
            left: 156px;
        }
        .two{
            left: 890px;
            top: 92px;
        }
        .three{
            left: 193px;
            top: 275px;
        }
        .four{
            left: 899px;
            top: 304px;
        }
    }
    .bgIcon{
        height:600px;
        margin: auto;
        width: 1200px;
        position: relative;
        background: url('../assets/img/tab1/bgIcon.jpg') no-repeat;
        background-size: 100% 100%;
        .auto{
            height:200px;
            position: absolute;
            margin: auto;
            top: -53px;
            left: 24px;
            right: 0;
            bottom: 0;
            width: 300px;
            background: url('../assets/img/logo.png');
            background-size: 100% 100%;
        }
    }
    .ban{
        width:100%;
        height:400px;
        line-height: 400px;
        background-size: 100% 100%;
        font-size:24px;
        color:#fff;
        p{
            text-align: center;
            font-size:24px;
            color:#fff;
        }
    }
    .banner{
        .bannerImg{
            width:100%;
            height:400px;
        }
    }
  }
</style>
